<template>
  <div class="customer-smart-alerts">
    <div 
      v-for="alert in relevantAlerts" 
      :key="alert.id"
      class="alert-item"
      :class="`priority-${alert.priority}`"
      @click="handleAlertClick(alert)"
    >
      <el-tooltip :content="alert.description" placement="top">
        <div class="alert-content">
          <el-icon :size="12" :color="getPriorityColor(alert.priority)">
            <component :is="getAlertIcon(alert.type)" />
          </el-icon>
          <span class="alert-text">{{ alert.title }}</span>
        </div>
      </el-tooltip>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from '@vue/runtime-core'
import { 
  Ticket, 
  Warning, 
  TrendCharts, 
  InfoFilled 
} from '@element-plus/icons-vue'

interface Alert {
  id: string
  type: 'order' | 'invoice' | 'risk' | 'opportunity'
  title: string
  description: string
  priority: 'high' | 'medium' | 'low'
  action?: string
}

interface Props {
  customer: any
  maxAlerts?: number
}

const props = withDefaults(defineProps<Props>(), {
  maxAlerts: 2
})

const emit = defineEmits(['alert-action'])

// 根据客户数据生成智能提醒
const relevantAlerts = computed(() => {
  const alerts: Alert[] = []
  
  // 开票提醒
  if (props.customer.uninvoicedAmount > 0) {
    alerts.push({
      id: 'invoice',
      type: 'invoice',
      title: '待开票',
      description: `有 ¥${props.customer.uninvoicedAmount} 金额待开票`,
      priority: 'medium',
      action: 'invoice'
    })
  }
  
  // 风险提醒
  if (props.customer.creditRating === 'C') {
    alerts.push({
      id: 'risk',
      type: 'risk',
      title: '风险客户',
      description: '信用评级较低',
      priority: 'high',
      action: 'review'
    })
  }
  
  // 商机提醒
  if (props.customer.activityLevel === 'high' && props.customer.lastOrderDate) {
    const lastOrderDays = getDaysFromLastOrder(props.customer.lastOrderDate)
    if (lastOrderDays > 30 && lastOrderDays <= 60) {
      alerts.push({
        id: 'opportunity',
        type: 'opportunity',
        title: '潜在复购',
        description: '客户可能近期有复购需求',
        priority: 'medium',
        action: 'contact'
      })
    }
  }
  
  return alerts.slice(0, props.maxAlerts)
})

const getPriorityColor = (priority: 'high' | 'medium' | 'low') => {
  const colors = {
    high: '#f5222d',
    medium: '#fa8c16',
    low: '#1890ff'
  }
  return colors[priority]
}

const getAlertIcon = (type: 'order' | 'invoice' | 'risk' | 'opportunity') => {
  const icons = {
    invoice: Ticket,
    risk: Warning,
    opportunity: TrendCharts,
    order: InfoFilled
  }
  return icons[type] || InfoFilled
}

const getDaysFromLastOrder = (lastOrderDate: string) => {
  if (!lastOrderDate) return 999
  const lastDate = new Date(lastOrderDate)
  const today = new Date()
  const diffTime = today.getTime() - lastDate.getTime()
  return Math.ceil(diffTime / (1000 * 60 * 60 * 24))
}

const handleAlertClick = (alert: Alert) => {
  emit('alert-action', alert)
}
</script>

<style scoped lang="scss">
.customer-smart-alerts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  
  .alert-item {
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateX(2px);
    }
    
    &.priority-high {
      background: rgba(245, 34, 45, 0.1);
      border: 1px solid rgba(245, 34, 45, 0.2);
    }
    
    &.priority-medium {
      background: rgba(250, 140, 22, 0.1);
      border: 1px solid rgba(250, 140, 22, 0.2);
    }
    
    &.priority-low {
      background: rgba(24, 144, 255, 0.1);
      border: 1px solid rgba(24, 144, 255, 0.2);
    }
    
    .alert-content {
      display: flex;
      align-items: center;
      gap: 4px;
      
      .alert-text {
        font-size: 11px;
        font-weight: 500;
      }
    }
  }
}
</style>